<template>
    <div class="cinemalist">
        <van-cell-group >
            <van-cell v-for="(l,i) in list" :key='i'>
                <!-- query:{
                    scrolltop:$refs.mylist.scrollTop
                }, -->
                <router-link :to="{name:'detail',
                
                params:film?{
                    cinemaId:l.cinemaId,
                    filmId:film.filmId,
                    dateday:dateday
                }:{cinemaId:l.cinemaId}}" class="aitem">
                <div class="left">
                    <div class="cinema-name">
                        {{l.name}}
                    </div>
                    <div class="cinema-addres">
                        {{l.address}}
                    </div>
                </div>
                <div class="right">
                    <p>
                        <span>￥</span>
                        <span>{{l.lowPrice/100}}</span>
                        <span>起</span>
                    </p>
                    <div class="distance">
                        {{ l.Distance? (parseInt(l.Distance) + '公里') :'距离未知' }}
                    </div>
                </div>
                </router-link>
            </van-cell>
        </van-cell-group>
    </div>
</template>
<script>
export default {
    setup() {
        
    },
    props:{
        list:Array,
        film:{
            type:Object,
            default:null
        },
        dateday:Number
    }
}
</script>
<style lang="scss">
.cinemalist{
    width: 100%;
    // margin: 10px;
    .van-cell__value{
        .aitem{
        display: flex;
        flex-wrap: nowrap;
        padding: 10px;
        justify-content: space-between;
            .left{
            width: 70%;
            .cinema-name{
                font-size: 15px;
                color: #191a1b;
                margin-bottom: 5px;
                text-align: left;
            }
            .cinema-addres{
                font-size: 13px;
                color: #797d82;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        .right{
            text-align: right;
            p{
                color: #ff5f16;
                span{
                    :first-child{
                        font-size: 12px;
                    }
                    :nth-of-child(2){
                        font-size: 16px;
                    }
                    :nth-of-child(3){
                        font-size: 12px;
                    }
                }
            }
            .distance{
                font-size: 12px;
                color: #797d82;
            }
        }
        }
        
    }

}
</style>